{% extends 'base.html' %} {% load static %} {% block title %}我的代码 - Creeps Judge{% endblock %} {% block extra_css %}
<style>

    .page-header {
        background: linear-gradient(135deg, rgba(45, 55, 85, 0.3) 0%, rgba(35, 45, 75, 0.4) 100%);
        backdrop-filter: blur(15px);
        color: white;
        padding: 30px 0;
        margin-bottom: 30px;
        text-align: center;
        border-bottom: 2px solid;
        border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(100, 150, 255, 0.6)) 1;
    }

    .page-header h1 {
        font-size: 3rem;
        background: linear-gradient(135deg, #00d4ff, #6496ff, #ffffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 1rem;
        text-shadow: 0 0 5px rgba(0, 212, 255, 0.4), 0 0 10px rgba(0, 212, 255, 0.3), 0 0 15px rgba(0, 212, 255, 0.2);
        filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.3));
        font-weight: 600;
    }

    .page-header p {
        font-size: 1.2rem;
        color: rgba(255, 255, 255, 0.8);
        margin: 0;
    }

    .code-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
        gap: 25px;
        margin-bottom: 30px;
    }

    .code-card {
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
        border: 2px solid rgba(100, 150, 255, 0.5);
        border-radius: 20px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(100, 150, 255, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.05);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        overflow: hidden;
        color: inherit;
        position: relative;
        transform-style: preserve-3d;
        display: block;
    }

    /* 默认卡片背景 */
    .code-card {
        background: linear-gradient(135deg, rgba(45, 55, 85, 0.3) 0%, rgba(35, 45, 75, 0.4) 100%);
    }

    /* Python 语言卡片 */
    .code-card-python {
        background: linear-gradient(135deg, rgba(53, 114, 165, 0.3) 0%, rgba(32, 74, 135, 0.4) 100%);
        border-color: rgba(53, 114, 165, 0.5);
    }

    /* JavaScript 语言卡片 */
    .code-card-javascript {
        background: linear-gradient(135deg, rgba(240, 219, 79, 0.3) 0%, rgba(227, 183, 31, 0.4) 100%);
        border-color: rgba(240, 219, 79, 0.5);
    }

    /* TypeScript 语言卡片 */
    .code-card-typescript {
        background: linear-gradient(135deg, rgba(255, 105, 180, 0.3) 0%, rgba(219, 112, 147, 0.4) 100%);
        border-color: rgba(255, 105, 180, 0.5);
    }

    /* Lua 语言卡片 */
    .code-card-lua {
        background: linear-gradient(135deg, rgba(46, 139, 87, 0.3) 0%, rgba(60, 179, 113, 0.4) 100%);
        border-color: rgba(46, 139, 87, 0.5);
    }

    .code-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.5s ease;
    }

    .code-card:hover {
        transform: perspective(1000px) rotateX(5deg) rotateY(5deg) translateZ(10px) translateY(-8px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(100, 150, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.2);
        text-decoration: none;
        color: inherit;
        border-color: rgba(100, 150, 255, 0.8);
    }

    /* Python 卡片悬停效果 */
    .code-card-python:hover {
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(53, 114, 165, 0.3), 0 0 15px rgba(255, 255, 255, 0.2);
        border-color: rgba(53, 114, 165, 0.8);
    }

    /* JavaScript 卡片悬停效果 */
    .code-card-javascript:hover {
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(240, 219, 79, 0.3), 0 0 15px rgba(255, 255, 255, 0.2);
        border-color: rgba(240, 219, 79, 0.8);
    }

    /* TypeScript 卡片悬停效果 */
    .code-card-typescript:hover {
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 105, 180, 0.3), 0 0 15px rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 105, 180, 0.8);
    }

    /* Lua 卡片悬停效果 */
    .code-card-lua:hover {
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(46, 139, 87, 0.3), 0 0 15px rgba(255, 255, 255, 0.2);
        border-color: rgba(46, 139, 87, 0.8);
    }

    .code-card:hover::before {
        left: 100%;
    }

    .code-card-header {
        background: linear-gradient(135deg, rgba(100, 150, 255, 0.8), rgba(0, 212, 255, 0.8));
        color: white;
        padding: 25px;
        position: relative;
        backdrop-filter: blur(10px);
    }

    /* Python 语言卡片头部 */
    .code-card-python .code-card-header {
        background: linear-gradient(135deg, rgba(53, 114, 165, 0.8), rgba(32, 74, 135, 0.8));
    }

    /* JavaScript 语言卡片头部 */
    .code-card-javascript .code-card-header {
        background: linear-gradient(135deg, rgba(240, 219, 79, 0.8), rgba(227, 183, 31, 0.8));
        color: rgba(0, 0, 0, 0.8);
    }

    .code-card-javascript .code-card-title {
        color: rgba(0, 0, 0, 0.8);
        text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
    }

    /* TypeScript 语言卡片头部 */
    .code-card-typescript .code-card-header {
        background: linear-gradient(135deg, rgba(255, 105, 180, 0.8), rgba(219, 112, 147, 0.8));
    }

    /* Lua 语言卡片头部 */
    .code-card-lua .code-card-header {
        background: linear-gradient(135deg, rgba(46, 139, 87, 0.8), rgba(60, 179, 113, 0.8));
    }

    .code-card-title {
        font-size: 1.4rem;
        font-weight: 700;
        margin: 0;
        margin-bottom: 10px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        color: white;
    }

    .code-language-badge {
        background: rgba(255, 255, 255, 0.3);
        color: white;
        padding: 6px 15px;
        border-radius: 25px;
        font-size: 0.85rem;
        font-weight: 600;
        position: absolute;
        top: 25px;
        right: 70px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .delete-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background: rgba(220, 53, 69, 0.8);
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
        z-index: 100;
        text-decoration: none;
        pointer-events: auto;
    }

    .delete-btn:hover {
        background: rgba(220, 53, 69, 1);
        border-color: rgba(255, 255, 255, 0.8);
        transform: scale(1.1);
        box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
        color: white;
        text-decoration: none;
    }

    /* JavaScript 语言标签 */
    .code-card-javascript .code-language-badge {
        color: rgba(0, 0, 0, 0.8);
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
    }

    .code-card-body {
        padding: 25px;
        color: rgba(255, 255, 255, 0.9);
    }

    .code-meta-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 18px;
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.7);
        gap: 10px;
    }

    .code-meta-item {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.1);
        padding: 6px 12px;
        border-radius: 15px;
        backdrop-filter: blur(5px);
    }

    .code-meta-item i {
        color: rgba(100, 150, 255, 0.8);
    }

    .code-description {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1rem;
        line-height: 1.6;
        margin: 0 0 15px 0;
    }

    .code-actions {
        display: flex;
        gap: 10px;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .action-btn {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid rgba(100, 150, 255, 0.5);
        border-radius: 8px;
        background: rgba(100, 150, 255, 0.2);
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        font-size: 0.85rem;
        text-align: center;
        transition: all 0.3s ease;
        backdrop-filter: blur(5px);
    }

    .action-btn:hover {
        background: rgba(100, 150, 255, 0.4);
        border-color: rgba(100, 150, 255, 0.8);
        color: white;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(100, 150, 255, 0.3);
    }

    /* Python 语言文件管理按钮 */
    .code-card-python .action-btn {
        border-color: rgba(53, 114, 165, 0.5);
        background: rgba(53, 114, 165, 0.2);
    }

    .code-card-python .action-btn:hover {
        background: rgba(53, 114, 165, 0.4);
        border-color: rgba(53, 114, 165, 0.8);
        box-shadow: 0 4px 12px rgba(53, 114, 165, 0.3);
    }

    /* JavaScript 语言文件管理按钮 */
    .code-card-javascript .action-btn {
        border-color: rgba(240, 219, 79, 0.5);
        background: rgba(240, 219, 79, 0.2);
        color: rgba(0, 0, 0, 0.8);
    }

    .code-card-javascript .action-btn:hover {
        background: rgba(240, 219, 79, 0.4);
        border-color: rgba(240, 219, 79, 0.8);
        color: rgba(0, 0, 0, 0.9);
        box-shadow: 0 4px 12px rgba(240, 219, 79, 0.3);
    }

    /* TypeScript 语言文件管理按钮 */
    .code-card-typescript .action-btn {
        border-color: rgba(255, 105, 180, 0.5);
        background: rgba(255, 105, 180, 0.2);
    }

    .code-card-typescript .action-btn:hover {
        background: rgba(255, 105, 180, 0.4);
        border-color: rgba(255, 105, 180, 0.8);
        box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
    }

    /* Lua 语言文件管理按钮 */
    .code-card-lua .action-btn {
        border-color: rgba(46, 139, 87, 0.5);
        background: rgba(46, 139, 87, 0.2);
    }

    .code-card-lua .action-btn:hover {
        background: rgba(46, 139, 87, 0.4);
        border-color: rgba(46, 139, 87, 0.8);
        box-shadow: 0 4px 12px rgba(46, 139, 87, 0.3);
    }



    .code-card-content {
        text-decoration: none;
        color: inherit;
        display: block;
    }

    .code-card-content:hover {
        text-decoration: none;
        color: inherit;
    }

    .text-muted {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    .empty-state {
        text-align: center;
        padding: 80px 30px;
        background: linear-gradient(135deg, rgba(45, 55, 85, 0.3) 0%, rgba(35, 45, 75, 0.4) 100%);
        backdrop-filter: blur(15px);
        border-radius: 20px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(100, 150, 255, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.05);
        border: 2px solid rgba(100, 150, 255, 0.5);
    }

    .empty-state-icon {
        font-size: 5rem;
        background: linear-gradient(135deg, #00d4ff, #6496ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 25px;
        filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.3));
    }

    .empty-state h3 {
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 20px;
        font-size: 1.5rem;
        font-weight: 600;
    }

    .empty-state p {
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 30px;
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .create-btn {
        background: linear-gradient(135deg, rgba(100, 150, 255, 0.8), rgba(0, 212, 255, 0.8));
        border: 2px solid rgba(255, 255, 255, 0.3);
        padding: 15px 35px;
        border-radius: 30px;
        color: white;
        font-weight: 600;
        font-size: 1.1rem;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        backdrop-filter: blur(10px);
        position: relative;
        overflow: hidden;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .create-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
    }

    .create-btn:hover {
        background: linear-gradient(135deg, rgba(100, 150, 255, 1), rgba(0, 212, 255, 1));
        border-color: rgba(255, 255, 255, 0.8);
        transform: perspective(500px) rotateX(5deg) rotateY(5deg) translateZ(10px) translateY(-3px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 30px rgba(100, 150, 255, 0.4), 0 0 15px rgba(255, 255, 255, 0.2);
        color: white;
        text-decoration: none;
    }

    .create-btn:hover::before {
        left: 100%;
    }

    .pagination-wrapper {
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }

    .pagination {
        background: linear-gradient(135deg, rgba(45, 55, 85, 0.3) 0%, rgba(35, 45, 75, 0.4) 100%);
        backdrop-filter: blur(15px);
        border-radius: 30px;
        padding: 15px 25px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 20px rgba(100, 150, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .pagination .page-link {
        border: none;
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.8);
        padding: 10px 15px;
        margin: 0 3px;
        border-radius: 10px;
        transition: all 0.3s ease;
        backdrop-filter: blur(5px);
    }

    .pagination .page-link:hover {
        background: rgba(100, 150, 255, 0.3);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(100, 150, 255, 0.3);
    }

    .pagination .page-item.active .page-link {
        background: linear-gradient(135deg, rgba(100, 150, 255, 0.8), rgba(0, 212, 255, 0.8));
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 4px 15px rgba(100, 150, 255, 0.4);
    }

    .stats-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 35px;
        background: linear-gradient(135deg, rgba(45, 55, 85, 0.3) 0%, rgba(35, 45, 75, 0.4) 100%);
        backdrop-filter: blur(15px);
        padding: 25px 30px;
        border-radius: 15px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 20px rgba(100, 150, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .stats-info {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1.1rem;
        font-weight: 500;
    }

    .stats-info i {
        color: rgba(100, 150, 255, 0.8);
        margin-right: 8px;
    }

    /* 页面特定样式 - 代码列表 */

    /* 响应式设计 */
    @media (max-width: 768px) {
        .code-grid {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .page-header h1 {
            font-size: 2.5rem;
        }

        .page-header {
            padding: 40px 0;
        }

        .stats-row {
            flex-direction: column;
            gap: 20px;
            text-align: center;
        }

        .create-btn {
            padding: 12px 25px;
            font-size: 1rem;
        }

        .code-card {
            margin: 0 10px;
        }

        .empty-state {
            padding: 60px 20px;
        }
    }
</style>
{% endblock %} {% block content %}

<div class="container" style="margin-top: 30px;">
    {% if page_obj %}
    <div class="stats-row">
        <div class="stats-info"><i class="fas fa-file-code"></i> 共 {{ page_obj.paginator.count }} 个代码项目</div>
        <button type="button" class="create-btn" id="create-code-btn" data-create-url="{% url 'codes:code_create' %}"> <i class="fas fa-plus-circle"></i> 创建新代码 </button>
    </div>

    <div class="code-grid">
        {% for code in page_obj %}
        <div class="code-card code-card-{{ code.language }}">
            <a href="#" class="delete-btn" data-code-id="{{ code.id }}" data-code-title="{{ code.title|escapejs }}" title="删除代码">
                <i class="fas fa-trash"></i>
            </a>
            <a href="{% url 'codes:code_files' code.id %}" class="code-card-content">
                <div class="code-card-header">
                    <h3 class="code-card-title">
                        {% if code.language == 'python' %}
                        <i class="fab fa-python" style="margin-right: 8px;"></i>
                        {% elif code.language == 'javascript' %}
                        <i class="fab fa-js-square" style="margin-right: 8px;"></i>
                        {% elif code.language == 'typescript' %}
                        <i class="fab fa-js" style="margin-right: 8px;"></i>
                        {% elif code.language == 'lua' %}
                        <i class="fas fa-moon" style="margin-right: 8px;"></i>
                        {% else %}
                        <i class="fas fa-code" style="margin-right: 8px;"></i>
                        {% endif %}
                        {{ code.title }}
                    </h3>
                    <span class="code-language-badge">{{ code.get_language_display }}</span>
                </div>
                <div class="code-card-body">
                    <div class="code-meta-row">
                        <div class="code-meta-item">
                            <i class="fas fa-file-code"></i>
                            <span>{{ code.get_file_count }} 个文件</span>
                        </div>
                        <div class="code-meta-item">
                            <i class="fas fa-clock"></i>
                            <span>{{ code.updated_at|date:"m-d H:i" }}</span>
                        </div>
                        <div class="code-meta-item toggle-public-btn" data-code-id="{{ code.id }}" style="cursor: pointer; transition: all 0.3s ease;" title="点击切换公开/私有状态">
                            {% if code.is_public %}
                            <i class="fas fa-globe" style="color: #00d4ff"></i>
                            <span style="color: #00d4ff">公开挑战</span>
                            {% else %}
                            <i class="fas fa-lock" style="color: rgba(255, 255, 255, 0.5)"></i>
                            <span style="color: rgba(255, 255, 255, 0.5)">私有</span>
                            {% endif %}
                        </div>
                        <div class="code-meta-item toggle-starred-btn" data-code-id="{{ code.id }}" data-is-starred="{{ code.is_starred|yesno:'true,false' }}" style="cursor: pointer; transition: all 0.3s ease;" title="点击切换星标状态（用于世界杯比赛）">
                            {% if code.is_starred %}
                            <i class="fas fa-star" style="color: #ffd700"></i>
                            <span style="color: #ffd700">星标</span>
                            {% else %}
                            <i class="fas fa-star" style="color: rgba(255, 255, 255, 0.3)"></i>
                            <span style="color: rgba(255, 255, 255, 0.6)">星标</span>
                            {% endif %}
                        </div>
                    </div>
                    {% if code.description %}
                    <p class="code-description">{{ code.description|truncatechars:120 }}</p>
                    {% else %}
                    <p class="code-description text-muted">暂无描述</p>
                    {% endif %}
                </div>
            </a>
            <div class="code-actions">
                <a href="{% url 'codes:code_files' code.id %}" class="action-btn">
                    <i class="fas fa-folder-open"></i> 文件管理
                </a>
            </div>
        </div>
        {% endfor %}
    </div>

    {% if page_obj.paginator.num_pages > 1 %}
    <div class="pagination-wrapper">
        <nav aria-label="代码列表分页">
            <ul class="pagination">
                {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page=1"> <i class="fas fa-angle-double-left"></i> 首页 </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}">
                        <i class="fas fa-angle-left"></i> 上一页
                    </a>
                </li>
                {% endif %}

                <li class="page-item active">
                    <span class="page-link">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
                </li>

                {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}">
                        下一页 <i class="fas fa-angle-right"></i>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">
                        末页 <i class="fas fa-angle-double-right"></i>
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    {% endif %} {% else %}
    <div class="empty-state">
        <div class="empty-state-icon">
            <i class="fas fa-code"></i>
        </div>
        <h3>还没有代码项目</h3>
        <p>开始创建您的第一个代码项目，体验强大的在线编程环境</p>
        <button type="button" class="create-btn" id="create-first-code-btn" data-create-url="{% url 'codes:code_create' %}"> <i class="fas fa-plus"></i> 创建第一个代码 </button>
    </div>
    {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 处理创建新代码按钮点击事件
    function handleCreateCodeClick(e) {
        e.preventDefault();
        
        // 检查代码操作功能是否启用
        const codeOperationsEnabled = {{ code_operations_enabled|yesno:"true,false" }};
        
        if (!codeOperationsEnabled) {
            showCodeOperationsDisabledAlert();
            return;
        }
        
        // 如果功能启用，跳转到创建页面
        const createUrl = this.getAttribute('data-create-url');
        if (createUrl) {
            window.location.href = createUrl;
        }
    }
    
    // 为所有创建代码按钮添加事件监听器
    const createCodeBtn = document.getElementById('create-code-btn');
    const createFirstCodeBtn = document.getElementById('create-first-code-btn');
    
    if (createCodeBtn) {
        createCodeBtn.addEventListener('click', handleCreateCodeClick);
    }
    
    if (createFirstCodeBtn) {
        createFirstCodeBtn.addEventListener('click', handleCreateCodeClick);
    }
    
    document.querySelectorAll('.delete-btn').forEach(function(btn) {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            const codeId = this.getAttribute('data-code-id');
            const codeTitle = this.getAttribute('data-code-title');
            
            if (confirm('确定要删除代码项目 "' + codeTitle + '" 吗？\n\n此操作不可撤销，所有相关的版本历史也将被删除。')) {
                // 创建一个隐藏的表单来提交删除请求
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '/codes/' + codeId + '/delete/';
                
                // 添加CSRF token
                const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]');
                if (csrfToken) {
                    const csrfInput = document.createElement('input');
                    csrfInput.type = 'hidden';
                    csrfInput.name = 'csrfmiddlewaretoken';
                    csrfInput.value = csrfToken.value;
                    form.appendChild(csrfInput);
                }
                
                document.body.appendChild(form);
                form.submit();
            }
        });
    });
});
</script>

<script>
// 切换代码公开/私有状态
document.addEventListener('DOMContentLoaded', function() {
    const toggleButtons = document.querySelectorAll('.toggle-public-btn');
    
    toggleButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            const codeId = this.dataset.codeId;
            const icon = this.querySelector('i');
            const span = this.querySelector('span');
            const isCurrentlyPublic = icon.classList.contains('fa-globe');
            
            // 添加加载状态
            const originalContent = this.innerHTML;
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span>切换中...</span>';
            this.style.pointerEvents = 'none';
            
            // 发送AJAX请求
            fetch(`/codes/${codeId}/toggle-public/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value || getCookie('csrftoken')
                },
                body: `is_public=${!isCurrentlyPublic}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 更新UI
                    if (data.is_public) {
                        this.innerHTML = '<i class="fas fa-globe" style="color: #00d4ff"></i><span style="color: #00d4ff">公开挑战</span>';
                    } else {
                        this.innerHTML = '<i class="fas fa-lock" style="color: rgba(255, 255, 255, 0.5)"></i><span style="color: rgba(255, 255, 255, 0.5)">私有</span>';
                    }
                    
                    // 显示成功消息
                    showMessage(data.message, 'success');
                } else {
                    // 恢复原始内容
                    this.innerHTML = originalContent;
                    showMessage(data.error || '操作失败', 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                // 恢复原始内容
                this.innerHTML = originalContent;
                showMessage('网络错误，请重试', 'error');
            })
            .finally(() => {
                this.style.pointerEvents = 'auto';
            });
        });
        
        // 添加悬停效果
        button.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.05)';
            this.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
        });
        
        button.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1)';
            this.style.backgroundColor = 'transparent';
        });
    });
});

// 切换代码星标状态
document.addEventListener('DOMContentLoaded', function() {
    const toggleStarredButtons = document.querySelectorAll('.toggle-starred-btn');
    
    toggleStarredButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            const codeId = this.dataset.codeId;
            const icon = this.querySelector('i');
            const span = this.querySelector('span');
            const isCurrentlyStarred = this.dataset.isStarred === 'true';
            
            // 添加加载状态
            const originalContent = this.innerHTML;
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span>切换中...</span>';
            this.style.pointerEvents = 'none';
            
            // 获取CSRF token
            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value || getCookie('csrftoken');
            console.log('CSRF Token:', csrfToken);
            console.log('Code ID:', codeId);
            console.log('Currently Starred:', isCurrentlyStarred);
            console.log('New Starred Value:', !isCurrentlyStarred);
            
            // 发送AJAX请求
            fetch(`/codes/${codeId}/toggle-starred/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRFToken': csrfToken
                },
                body: `is_starred=${!isCurrentlyStarred}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 更新UI
                    if (data.is_starred) {
                        this.innerHTML = '<i class="fas fa-star" style="color: #ffd700"></i><span style="color: #ffd700">星标</span>';
                        this.dataset.isStarred = 'true';
                        
                        // 如果设置为星标，需要更新其他项目的星标状态
                        document.querySelectorAll('.toggle-starred-btn').forEach(otherBtn => {
                            if (otherBtn !== this && otherBtn.dataset.isStarred === 'true') {
                                otherBtn.innerHTML = '<i class="fas fa-star" style="color: rgba(255, 255, 255, 0.3)"></i><span style="color: rgba(255, 255, 255, 0.6)">星标</span>';
                                otherBtn.dataset.isStarred = 'false';
                            }
                        });
                    } else {
                        this.innerHTML = '<i class="fas fa-star" style="color: rgba(255, 255, 255, 0.3)"></i><span style="color: rgba(255, 255, 255, 0.6)">星标</span>';
                        this.dataset.isStarred = 'false';
                    }
                    
                    // 显示成功消息
                    showMessage(data.message, 'success');
                } else {
                    // 恢复原始内容
                    this.innerHTML = originalContent;
                    showMessage(data.error || '操作失败', 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                // 恢复原始内容
                this.innerHTML = originalContent;
                showMessage('网络错误，请重试', 'error');
            })
            .finally(() => {
                this.style.pointerEvents = 'auto';
            });
        });
        
        // 添加悬停效果
        button.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.05)';
            this.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
        });
        
        button.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1)';
            this.style.backgroundColor = 'transparent';
        });
    });
});

// 获取CSRF token的辅助函数
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// 显示消息的辅助函数
function showMessage(message, type) {
    // 创建消息元素
    const messageDiv = document.createElement('div');
    messageDiv.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show`;
    messageDiv.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        min-width: 300px;
        background: ${type === 'success' ? 'linear-gradient(135deg, rgba(40, 167, 69, 0.9), rgba(25, 135, 84, 0.9))' : 'linear-gradient(135deg, rgba(220, 53, 69, 0.9), rgba(176, 42, 55, 0.9))'};
        border: none;
        border-radius: 10px;
        color: white;
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    `;
    
    messageDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
    `;
    
    document.body.appendChild(messageDiv);
    
    // 自动移除消息
    setTimeout(() => {
        if (messageDiv.parentNode) {
            messageDiv.remove();
        }
    }, 3000);
}

// 显示代码操作功能禁用提示
function showCodeOperationsDisabledAlert() {
    alert('代码操作功能已被管理员暂时关闭。\n\n如有疑问，请联系系统管理员。');
}
</script>

{% csrf_token %}
{% endblock %}
